<script setup>
import {ref} from 'vue';
import useUserInfoStore from '@/stores/userInfo.js';
import {useTokenStore} from '@/stores/token.js';
import {useRouter} from 'vue-router';
import {updatePwdService} from '@/api/teacher.js';
import {ElMessage} from 'element-plus';

const userInfoStore = useUserInfoStore();
const tokenStore = useTokenStore();
const router = useRouter();

const userInfo = ref({...userInfoStore.info});

const rules = {
  newPassword: [
    {required: true, message: '请输入新密码', trigger: 'blur'},
    {min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur'}
  ],
  oldPassword: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur'}
  ],
  rePassword: [
    {validator: checkRePassword, trigger: 'blur'}
  ]
}

function checkRePassword(rule, value, callback) {
  if (value === '') {
    callback(new Error('请再次确认密码'));
  } else if (value !== userInfo.value.newPassword) {
    callback(new Error('请确保两次输入的密码一致'));
  } else {
    callback();
  }
}

const updatePassword = async () => {
  if (userInfo.value.newPassword !== userInfo.value.rePassword) {
    ElMessage.error('两次填写的新密码不一致');
    return;
  }

  const requestData = {
    old_pwd: userInfo.value.oldPassword,
    new_pwd: userInfo.value.newPassword,
    re_pwd: userInfo.value.rePassword
  };

  try {
    const result = await updatePwdService(requestData, {headers: {Authorization: ''}});
    ElMessage.success(result.msg || '密码更新成功');
    userInfo.value.oldPassword = '';
    userInfo.value.newPassword = '';
    userInfo.value.rePassword = '';

    tokenStore.removeToken();
    userInfoStore.removeInfo();

    // 确保成功消息显示后再跳转到登录页面
    await router.push('/StudentSystem/login');
  } catch (error) {
    if (error.response && error.response.status === 401) {
      ElMessage.error('原密码填写不正确');
    } else {
      ElMessage.error('密码更新失败');
    }
  }
};
</script>

<template>
  <el-card class="password-container">
    <template #header>
      <div class="header">
        <span>重置密码</span>
      </div>
      <br/>
    </template>
    <div>
      <el-row justify="center">
        <el-col :span="12">
          <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
            <el-form-item label="原密码" prop="oldPassword">
              <el-input v-model="userInfo.oldPassword" placeholder="请输入原密码" prefix-icon="Lock"
                        type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="userInfo.newPassword" placeholder="请输入新密码" prefix-icon="Lock"
                        type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="rePassword">
              <el-input v-model="userInfo.rePassword" placeholder="请确认新密码" prefix-icon="Lock"
                        type="password"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="button-container">
      <el-button class="submit-button" type="primary" @click="updatePassword">提交修改</el-button>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>

.header {
  font-size: 24px;
  text-align: center;
}

.el-form-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-input {
  width: 300px;
}

.password-container {
  width: 60%;
  padding: 20px;
  margin: 0 auto;
}

.submit-button {
  width: 300px;
  height: 40px;
}

.button-container {
  display: flex;
  padding-top: 10%;
  justify-content: center;
}
</style>
